
function ContainerManager() {
	this.mainFrameDiv = null;
	this.panel_clientFrameDiv = null;
	this.clientDiv = null;
	this.topToolBarContainer = null;
	this.leftSidePanelContainer = null;
	this.topToolBarContainerHeight = 39;
	this.leftSidePanelContainerWidth = 230;
	this.toolBarConfig = ["zoomIn","zoomOunt"];
	
	this.InitContainers = function() {
		this.InitBaseContainers();
		
		this.InitTopToolBar();
		this.AddTools();
		
		this.InitPanel_ClientContainer();
		this.InitLeftSidePanel();
		this.InitClientArea();
		document.body.appendChild(this.mainFrameDiv);
		this.LocateContainers();
	};

	this.GetTopToolBarHeight = function() {
		return this.topToolBarContainer.style.height;
	};
	
	this.GetLeftSidePanelWidth = function() {
		return this.leftSidePanelContainer.style.width;
	};
}

ContainerManager.prototype.InitTopToolBar = function() {
	this.topToolBarContainer = document.createElement("div");
	this.topToolBarContainer.setAttribute("id", "topToolBarDiv");
	this.topToolBarContainer.className = "tools-nav";
	this.mainFrameDiv.appendChild(this.topToolBarContainer);
};

ContainerManager.prototype.InitPanel_ClientContainer = function() {
		// create the panel_client Frame div
	this.panel_clientFrameDiv = document.createElement("div");
	this.panel_clientFrameDiv.setAttribute("id", "panel_clientFrameDiv");
	//this.panel_clientFrameDiv.style.padding = "0px";
	//this.panel_clientFrameDiv.style.margin = "0px";//this.GetTopToolBarHeight() + "px 0px 0px 0px";
	//this.panel_clientFrameDiv.className = "ui_content_bg";
	this.panel_clientFrameDiv.style.background = "#CCCCCC";
	this.mainFrameDiv.appendChild(this.panel_clientFrameDiv);
};

ContainerManager.prototype.InitLeftSidePanel = function() {
	this.leftSidePanelContainer = document.createElement("div");
	this.leftSidePanelContainer.setAttribute("id", "leftPanelDiv");
	this.leftSidePanelContainer.className = "left";
	var leftTitle = document.createElement("div");
	leftTitle.className = "title";
	leftTitle.id = "bktitle";
	this.leftSidePanelContainer.style.display = "none";
	
	var leftSpan = document.createElement("span");
	leftSpan.innerHTML = "Bookmarks";
	leftSpan.id = "text-hide";
	leftTitle.appendChild(leftSpan);
	var leftTitleBtn = document.createElement("i");
	leftTitleBtn.className = "tag";
	leftTitleBtn.id = "hide";
	leftTitle.appendChild(leftTitleBtn);
	this.leftSidePanelContainer.appendChild(leftTitle);
	
	
	var leftTag = document.createElement("div");
	leftTag.className = "left-left";
	leftTag.id = "leftTag";
	var leftUl = document.createElement("ul");
	var leftLi = document.createElement("li");
	var leftLiActiveSpan = document.createElement("span");
	leftLiActiveSpan.className = "active";
	leftLi.appendChild(leftLiActiveSpan);
	var leftLiSpan = document.createElement("span");
	leftLiSpan.className = "l1";
	leftLi.appendChild(leftLiSpan);
	leftUl.appendChild(leftLi);
	leftTag.appendChild(leftUl);
	this.leftSidePanelContainer.appendChild(leftTag);
	
	var leftContainer = document.createElement("div");
	leftContainer.className = "left-content";
	leftContainer.id = "leftContainer";
	//leftContainer.style.display = "none";
	
	var leftContainerDiv = document.createElement("div");
	leftContainerDiv.className = "content-1";
	var leftContainerTitleDiv = document.createElement("div");
	leftContainerTitleDiv.className = "con-title";
	//leftContainerDiv.appendChild(leftContainerTitleDiv);
	
	
	
	var leftContainerContent = document.createElement("div");
	leftContainerContent.className = "con-content";
	leftContainerContent.id = "bookmarkTree";
	var bookmarkTree = document.createElement("ul");
	bookmarkTree.className = "ztree";
	bookmarkTree.id = "bookmark";
	leftContainerContent.appendChild(bookmarkTree);
	leftContainerDiv.appendChild(leftContainerContent);
	this.leftSidePanelContainer.appendChild(leftContainer);
	leftContainer.appendChild(leftContainerDiv);
	this.panel_clientFrameDiv.appendChild(this.leftSidePanelContainer);
};

ContainerManager.prototype.InitClientArea = function() {
	this.clientDiv = document.createElement("div");
	this.clientDiv.setAttribute("id", "clientDiv");
	//this.clientDiv.style.padding = "0px";
	//this.clientDiv.style.margin = "0px";
	//this.clientDiv.style.backgroundColor = "#DEB887";
	//this.clientDiv.className = "ui_content";
	this.panel_clientFrameDiv.appendChild(this.clientDiv);
	
	var loadingOutDiv = document.createElement("div");
	loadingOutDiv.id = "loading";
	loadingOutDiv.className = "ui_trynow-spinner ui_dialog";
	loadingOutDiv.style.display = "block";
	loadingOutDiv.style.border = "0px";
	this.clientDiv.appendChild(loadingOutDiv);
	var loadingInDiv = document.createElement("div");
	loadingInDiv.className = "ui_spinner ui_float";
	loadingInDiv.textContent = "Loading.....";
	loadingOutDiv.appendChild(loadingInDiv);
};

ContainerManager.prototype.InitBaseContainers = function () {
	var htmlTag = document.getElementsByTagName("html").item(0);
	htmlTag.style.height = "100%";
	//htmlTag.style.width = "100%";
	htmlTag.style.padding = "0";
	htmlTag.style.margin = "0";
	document.body.style.height = "100%";
	//document.body.style.width = "100%";
	document.body.style.padding = "0";
	document.body.style.margin = "0";
	//document.body.style.backgroundColor = "#AC6230";
	
		// create the main frame div
	this.mainFrameDiv = document.createElement("div");
	this.mainFrameDiv.setAttribute("id", "mainFrameDiv");
	this.mainFrameDiv.style.display = "inline";
	this.mainFrameDiv.style.padding = "0";
	this.mainFrameDiv.style.margin = "0";
	this.mainFrameDiv.style.position = "absolute";
	this.mainFrameDiv.style.width = "100%";
	this.mainFrameDiv.style.height = "100%";
	
	
	//this.mainFrameDiv.style.zIndex = -1;
	
};

ContainerManager.prototype.LocateContainers = function() {
	// html
	var htmlTag = document.getElementsByTagName("html").item(0);
	htmlTag.style.height = "100%";
	htmlTag.style.width = "100%";
	htmlTag.style.padding = "0px";
	htmlTag.style.margin = "0px";
	// body
	document.body.style.height = "100%";
	document.body.style.width = "100%";
	
	document.body.style.padding = "0px";
	document.body.style.margin = "0px";
	// mainframe
	this.mainFrameDiv.style.padding = "0px";
	this.mainFrameDiv.style.margin = "0px";
	this.mainFrameDiv.style.position = "absolute";
	this.mainFrameDiv.style.width = "100%";
	this.mainFrameDiv.style.height = "100%";
	
	// topToolBarContainer
	this.topToolBarContainer.style.height = this.topToolBarContainerHeight + "px";
	
	// panel_clientContainer
	this.panel_clientFrameDiv.style.display = "block";
	this.panel_clientFrameDiv.style.position = "absolute";
	//this.panel_clientFrameDiv.style.top = this.topToolBarContainer.scrollHeight + "px";
	this.panel_clientFrameDiv.style.left = "0px";
	this.panel_clientFrameDiv.style.height = (this.mainFrameDiv.offsetHeight - this.topToolBarContainer.offsetHeight) + "px";
	this.panel_clientFrameDiv.style.width = "100%";
	
	// leftPanelContainer
	document.getElementById("leftTag").style.height = (this.panel_clientFrameDiv.offsetHeight - 24) + "px";
	document.getElementById("leftContainer").style.height = (this.panel_clientFrameDiv.offsetHeight - 25) + "px";
	document.getElementById("leftContainer").style.width = this.leftSidePanelContainerWidth + "px";
	document.getElementById("bookmarkTree").style.height = (this.panel_clientFrameDiv.offsetHeight - 55) + "px";
	
	// clientContainer
	this.clientDiv.style.position = "absolute";
	this.clientDiv.style.top = "0px";
	this.clientDiv.style.height = "100%";
	var clientWidth = 0;
	if (this.leftSidePanelContainer.style.visibility != "hidden"){
		clientWidth = this.leftSidePanelContainer.offsetWidth;
	}
	this.clientDiv.style.left = clientWidth + "px";
	this.clientDiv.style.width = (this.panel_clientFrameDiv.offsetWidth - clientWidth) + "px";
	this.topToolBarContainer.childNodes[0].style.width = (this.panel_clientFrameDiv.offsetWidth - clientWidth) + "px";
	
	
	$(".tool").hover(function () {
        $(this).css({ "border-radius": "2px", "-webkit-border-radius": "2px", "border": "1px solid #ffb167","background":"#fde3a4" });        
    }, function () {
        $(this).css({ "border-radius": "2px", "-webkit-border-radius": "2px", "border": "1px solid #ecedef", "background": "#ecedef" });
    });
	$(".tool").click(function () {
		$(this).css({ "border-radius": "2px", "-webkit-border-radius": "2px", "border": "1px solid #ff9026", "background": "#ffa73f" });
	});
};


ContainerManager.prototype.GetGlobalContainer = function() {
	return gContainerMgr;
};

ContainerManager.prototype.TimeOutResize = function() {
	ContainerManager.prototype.LocateContainers.call(ContainerManager.prototype.GetGlobalContainer());
};

ContainerManager.prototype.OnResize = function() {
	ContainerManager.prototype.LocateContainers.call(ContainerManager.prototype.GetGlobalContainer());
	window.setTimeout("ContainerManager.prototype.TimeOutResize()", 500);
};

ContainerManager.prototype.GetScrollBarPagePosition = function() {
	var viewerDiv = document.getElementById("ViewerArea");
	var pos = [];
	pos[0] = viewerDiv.scrollLeft;
	pos[1] = viewerDiv.scrollTop;
	return pos;
};

// this method is only for test purpose
ContainerManager.prototype.AddTools = function(){
	
	var toolsDiv = document.createElement("div");
	toolsDiv.className = "tools";
	
	var toolbarUl = document.createElement("ul");
	
	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);
	
	// add zoom in/out tool button
	var zoomInLi = document.createElement("li");
	zoomInLi.className = "tool";
	var zoomIn =  document.createElement("img");
	zoomIn.src = "images/zoomin_nor.png"; 
	zoomIn.id = "zoomInBtn";
	zoomIn.title = "Zoom In";
	zoomInLi.appendChild(zoomIn);
	toolbarUl.appendChild(zoomInLi);
	
	var zoomOutLi = document.createElement("li");
	zoomOutLi.className = "tool";
	var zoomOut = document.createElement("img");
	zoomOut.id = "zoomOutBtn";
	zoomOut.src = "images/zoomout_nor.png";
	zoomOut.title = "Zoom Out";
	zoomOutLi.appendChild(zoomOut);
	toolbarUl.appendChild(zoomOutLi);
	
	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);
	
	
	// add counterclockwise/clockwise tool button
	var clockwiseLi = document.createElement("li");
	clockwiseLi.className = "tool";
	var clockwise = document.createElement("img");
	clockwise.id = "clockwiseBtn";
	clockwise.src = "images/rotate_right_nor.png";
	clockwise.title = "Rotate Pages Clockwise";
	clockwiseLi.appendChild(clockwise);
	toolbarUl.appendChild(clockwiseLi);
	
	var counterclockwiseLi = document.createElement("li");
	counterclockwiseLi.className = "tool";
	var counterclockwise = document.createElement("img");
	counterclockwise.id = "counterclockwiseBtn";
	counterclockwise.src = "images/rotate_left_nor.png";
	counterclockwise.title = "Rotate Pages Counter-Clockwise";
	counterclockwiseLi.appendChild(counterclockwise);
	toolbarUl.appendChild(counterclockwiseLi);


	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);
	
	
	// add goto page functionality
	var toFirstPageLi = document.createElement("li");
	toFirstPageLi.className = "tool";
	var toFirstPageBtn = document.createElement("img");
	toFirstPageBtn.id = "toFirstPageBtn";
	toFirstPageBtn.src = "images/first_nor.png";
	toFirstPageBtn.title = "First Page";
	toFirstPageLi.appendChild(toFirstPageBtn);
	toolbarUl.appendChild(toFirstPageLi);
	
	// previous page & next page navigate
	var toPreviousPageLi = document.createElement("li");
	toPreviousPageLi.className = "tool";
	var toPreviousPageBtn = document.createElement("img");
	toPreviousPageBtn.id = "toPreviousPageBtn";
	toPreviousPageBtn.src = "images/pre_nor.png";
	toPreviousPageBtn.title = "Previous Page";
	toPreviousPageLi.appendChild(toPreviousPageBtn);
	toolbarUl.appendChild(toPreviousPageLi);
		
	var inputPageLi = document.createElement("li");
	var inputPage = document.createElement("input");
	inputPage.id = "inputPage";
	inputPage.type = "text";
	inputPage.title = "Goto Page";
	inputPage.className = "inp";
	inputPageLi.appendChild(inputPage);
	toolbarUl.appendChild(inputPageLi);
	
	var toNextPageLi = document.createElement("li");
	toNextPageLi.className = "tool";
	var toNextPageBtn = document.createElement("img");
	toNextPageBtn.id = "toNextPageBtn";
	toNextPageBtn.src = "images/next_nor.png";
	toNextPageBtn.title = "Next Page";
	toNextPageLi.appendChild(toNextPageBtn);
	toolbarUl.appendChild(toNextPageLi);

	var toLastPageLi = document.createElement("li");
	toLastPageLi.className = "tool";
	var toLastPageBtn = document.createElement("img");
	toLastPageBtn.id = "toLastPageBtn";
	toLastPageBtn.src = "images/last_nor.png";
	toLastPageBtn.title = "Last Page";
	toLastPageLi.appendChild(toLastPageBtn);
	toolbarUl.appendChild(toLastPageLi);
	
	
	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);

	var saveAsLi = document.createElement("li");
	saveAsLi.className = "tool";
	var saveAsBtn = document.createElement("img");
	saveAsBtn.id = "saveBtn";
	saveAsBtn.src = "images/save_nor.png";
	saveAsBtn.title = "Save As";
	saveAsLi.appendChild(saveAsBtn);
	toolbarUl.appendChild(saveAsLi);

	
	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);
	
	var txtSelLi = document.createElement("li");
	txtSelLi.className = "tool";
	var txtSelBtn = document.createElement("img");
	txtSelBtn.id = "txtSelBtn";
	txtSelBtn.src = "images/select_nor.png";
	txtSelBtn.title = "Text Selection Tool";
	txtSelLi.appendChild(txtSelBtn);
	toolbarUl.appendChild(txtSelLi);

	var lineLi = document.createElement("li");
	var lineImg = document.createElement("img");
	lineImg.src = "images/fengexian.png";
	lineLi.appendChild(lineImg);
	toolbarUl.appendChild(lineLi);
	
	toolsDiv.appendChild(toolbarUl);
	this.topToolBarContainer.appendChild(toolsDiv);
};

/*
// just for test purpose
ContainerManager.prototype.OutputMsg = function(str) {
	gContainerMgr.leftSidePanelContainer.textContent = str;
}
*/